<template>
	<view class="box">
		<view class="bg-image" :style="[{
			backgroundImage:bgImageStyle.backgroundImage
		}]">
			<view class="ai-tip" v-if="bgImageStyle.backgroundImage == ''">
				<u-icon name="photo" color="#fff" size="60"></u-icon>
				<p>请输入标题后AI帮你生成封面</p>
				<view class="liji-btn" v-if="is_shengImg" @click="lijiImg">立即生成</view>
			</view>
			<view class="genghuan-img" @click="show = true">
				<u-icon name="photo-fill" color="#fff" size="24"></u-icon>
				<span>更换封面</span>
			</view>
		</view>
		<view class="content-box">
			<input class="shuru-input" type="text" placeholder="添加标题(必填)" v-model="share_title" @blur="shengfengImg"/>
			<input class="shuru-input" type="text" placeholder="添加正文(选填)" v-model="share_content"/>
			<view class="content-tip">
				<view class="content-xian"></view>
				<p>以下对话内容使用AI生成</p>
				<view class="content-xian"></view>
			</view>
			<view class="content-scroll">
				<view class="chat-list" v-for="(item,index) in msgList" :key="item">
					<view class="chat-list-left">
						<image v-if="item.role == 'user'" class="logo-img" :src="userNews.img" ></image>
						<image v-if="item.role == 'system'" class="logo-img" src="../../static/picture_roboto_icon@2x.png" mode="widthFix"></image>
					</view>
					<view class="chat-list-right">
						<view v-if="item.type == 'text'">{{item.message}}</view> 
						<image class="ai-img-sheng" v-if="item.type == 'img'" :src="item.message" @click.stop="seeImg(item.message)" mode="widthFix"></image>
					</view>
					
				</view>
			</view>
		</view>
		<view class="fabu-btn" @click="fabuWorkFun">
			发布
		</view>
		<u-action-sheet :actions="btn_list" :show="show" @select="selectFengmian" ></u-action-sheet>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	import CONSTAPI from '../../api/url-index.js'
	
	export default{
		data(){
			return{
				bgImageStyle:{
					backgroundImage:''
				},
				msgList:[],
				share_title:'',
				share_content:'',
				appid:'',
				user_id:'',
				is_shengImg:false,
				fabu_image:'',
				btn_list:[{
					name:'重新生成'
				},{
					name:'上传图片'
				},{
					name:'取消'
				}],
				show:false,
				userNews:{},
			}
		},
		onLoad(e) {
			this.appid = e.appid
			this.user_id = uni.getStorageSync('uid')
			this.userNews = uni.getStorageSync('userNews')
			let chatArray = uni.getStorageSync('share_dialog')
			chatArray.forEach((item)=>{
				if(item.message.includes('ytslgz.cn') || item.message.includes('chatglm.cn')){
					item.type = 'img'
					if(this.bgImageStyle.backgroundImage == ''){
						this.bgImageStyle.backgroundImage = `url(${item.message})`
						this.fabu_image = item.message
					}
				}else{
					item.type = 'text'
				}
			})
			this.msgList = chatArray
		},
		methods:{
			shengfengImg(){
				console.log(this.share_title.length)
				if(this.share_title.length > 100){
					uni.showToast({
						title:'不得超过100字',
						icon:'error'
					})
					return false
				}else if(this.share_title.length > 0 && this.share_title.length < 100){
					this.is_shengImg = true
				}
			},
			lijiImg(){
				if(this.share_title.length > 100){
					uni.showToast({
						title:'不得超过100字',
						icon:'error'
					})
					return false
				}else if(this.share_title == ''){
					uni.showToast({
						title:'请填写标题',
						icon:'error'
					})
					return false
				}
				uni.showLoading({
					title:'生成中...'
				})
				http.getMakWorksImage({
					user_id:this.user_id,
					title:this.share_title
				}).then((res)=>{
					console.log(res)
					uni.hideLoading()
					if(res.data.code == 200){
						this.bgImageStyle.backgroundImage = `url(${res.data.data})`
						this.fabu_image = res.data.data
					}
				})
			},
			selectFengmian(e){
				if(e.name == '重新生成'){
					this.lijiImg()
				}else if(e.name == '上传图片'){
					let _this = this
					uni.chooseImage({
						count: 1, //默认9
						sourceType: ['album'],
						success: function (chooseImageRes) {
							uni.uploadFile({
								url:baseUrl+CONSTAPI.getUploadImg.url, //仅为示例，非真实的接口地址
								filePath: chooseImageRes.tempFilePaths[0],
								name: 'file',
								fileName: 'file',
								formData:{
									file:'file',//页面需要上传的字段
									user_id:_this.user_id
								},
								success: (uploadFileRes) => {
									var data = JSON.parse(uploadFileRes.data)
									_this.bgImageStyle.backgroundImage = `url(${data.data})`
									_this.fabu_image = data.data
									_this.show = false
								}
							});
							
						}
					});
				}else{
					this.show = false
				}
			},
			//预览图片
			seeImg(url){
				let imgArray = []
				imgArray.push(url)
				uni.previewImage({
					urls: imgArray,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//发布作品
			fabuWorkFun(){
				if(!this.fabu_image){
					return uni.showToast({
						title:'暂无封面图片！',
						icon:"error"
					})
				}
				let _this = this
				uni.showModal({
					title: '提示',
					content: '是否确定发布？',
					success: function (res) {
						if (res.confirm) {
							http.getWorkFabu({
								user_id:_this.user_id,
								image:_this.fabu_image,
								title:_this.share_title,
								content:_this.share_content,
								dialog:JSON.stringify(_this.msgList),
								appid:_this.appid,
							}).then((res)=>{
								console.log(res)
								if(res.data.code == 200){
									uni.showToast({
										title:res.data.msg,
										icon:'success'
									})
									uni.redirectTo({
										url:'/pages/my/my'
									})
								}else{
									uni.showToast({
										title:res.data.msg,
										icon:'error'
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.box{
		width: 100%;
		position: relative;
		.bg-image{
			transform-origin: top;
			height: 300px;
			width: 100%;
			position: relative;
			background: #000;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-size: cover;
			.ai-tip{
				font-size: 16px;
				color: #fff;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				p{
					margin-top: 10px;
				}
				.liji-btn{
					width: 100px;
					text-align: center;
					height: 30px;
					line-height: 30px;
					color: $main-color;
					font-size: 14px;
					background: #fff;
					margin-top: 15px;
					border-radius: 15px;
				}
			}
			.genghuan-img{
				position: absolute;
				right: 10px;
				top: 10px;
				width: 100px;
				font-size: 14px;
				color: #fff;
				display: flex;
				flex-direction: row;
				align-items: center;
				span{
					margin-left: 5px;
				}
			}
		}
		.content-box{
			position: absolute;
			top: 280px;
			left: 0;
			width: 100%;
			height: calc(100vh - 280px);
			box-sizing: border-box;
			border-radius: 20px 20px 0 0;
			padding: 15px;
			padding-bottom: env(safe-area-inset-bottom);
			background: #fff;
			.shuru-input{
				width: 100%;
				height: 40px;
				border-bottom: 1px solid #f2f2f2;
				margin-bottom: 15px;
			}
			.content-tip{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.content-xian{
					width: calc((100% - 150px)/2);
					height: 1px;
					border-bottom: 1px solid #999;
				}
				p{
					width: 150px;
					font-size: 12px;
					color: #999;
					text-align: center;
				}
			}
			.content-scroll{
				position: relative;
				width: 100%;
				margin-top: 10px;
				box-sizing: border-box;
				padding-bottom: 50px;
				height: 310px;
				overflow: hidden;
				overflow-y: scroll;
				.chat-list{
					width: 100%;
					display: flex;
					flex-direction: row;
					margin-bottom: 15px;
					.chat-list-left{
						width: 30px;
						margin-right: 10px;
						.logo-img{
							width: 26px;
							height: 26px;
							border-radius: 50%;
						}
					}
					.chat-list-right{
						width: calc(100% - 40px);
						font-size: 14px;
						line-height: 20px;
						.ai-img-sheng{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		.fabu-btn{
			position: fixed;
			left:5%;
			bottom: env(safe-area-inset-bottom);
			width: 90%;
			height: 50px;
			background: $main-color;
			border-radius: 25px;
			text-align: center;
			line-height: 50px;
			color: #fff;
		}
	}
</style>